<template>
  <div class="tab-container">
    <div class="tab-route">
      <router-view></router-view>
    </div>
    <div class="tabbar-footer">
      <div
        class="tabbar-item"
        v-for="item in tabList"
        :key="item.title"
        @click="select(item.index)"
      >
        <img :src="item.imgActive" v-if="item.index === tabIndex" />
        <img :src="item.img" v-else />
        <span :class="{ active: item.index === tabIndex }">{{
          item.title
        }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { tabList } from "@/utils/constant";
export default {
  name: "tab",
  data() {
    return {
      tabIndex: 1,
      tabList: tabList
    };
  },
  watch: {
    $route: {
      handler(route) {
        var path = Number(route.path.slice(-1));
        if (path) {
          this.tabIndex = path;
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    select: function(index) {
      if (this.tabIndex === index) return;
      this.tabIndex = index;
      this.$router.replace({ path: `/tab/${this.tabIndex}` });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.tab-container {
  width: 100%;
  height: 100%;
  .tab-route {
    width: 100%;
    height: calc(100% - #{$tabbar-height});
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tabbar-footer {
    width: 100%;
    height: $tabbar-height;
    background: $tabbar-bgColor;
    border-top: 1px solid $tabbar-borderColor;
    display: flex;
    .tabbar-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      img {
        height: 20px;
      }
      span {
        font-size: 10px;
        line-height: 16px;
        color: $tabbar-fontColor;
        &.active {
          color: $tabbar-active-fontColor;
        }
      }
    }
  }
}
</style>
